html {
  background: url("~img/common/bg.png") center 51px no-repeat #111629;
  background-size: 100% auto;
}

:root {
  --header-heigth: 60px;
  --footer-heigth: 60px;

  --font-blue-color: rgb(0, 160, 210);
  --font-blue-light-color: rgba(3, 202, 252, 1);
  --font-green-color: rgba(27, 243, 222, .6);
  --font-yellow-color: rgba(255, 201, 38, 1);

  --module-title-color: rgba(180, 217, 233, .8);

  --menu-border-color: rgba(10, 183, 255, .4);
  --menu-hover-color: rgba(255, 201, 38, .7);
  --menu-hover-border-color: rgba(255, 201, 38, .4);

  --index-module-width: 340px;
  --index-module-height: 170px;
  //--index-module-height:calc((100% - 30px) / 4);


}


#app {
  height: 100vh;
  display: flex;
  flex-direction: column;

  > header {
    height: var(--header-heigth);
  }

  > section {
    flex: 1;
    box-sizing: border-box;
    overflow: hidden;

    > .container {
      height: 100%;
      background-color: #000;
    }

  }

  > footer {
    display: none;
    height: var(--footer-heigth);
  }
}

.el-scrollbar__wrap{
  overflow-x: hidden!important;
}


/* 滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 8px;
  background-color: rgba(0, 0, 0, .5);
}

::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 0 #333;
  background-color: rgba(0, 160, 210, .4);
  //background-color: var(--font-green-color);
  border-radius: 1px;
}

html {
  * {
    scrollbar-color: rgba(27, 243, 222, .1) rgba(0, 0, 0, .2);
    scrollbar-width: thin;
  }
}

.connected-device video{object-fit:fill !important;}
